<template>
    <div class="PersonResumeLook">
		<!-- 内容区域 -->
		<div class="main cl">
            <!-- banner -->
            <div class="banner"></div>
            <!-- block -->
            <div class="block">
                <div class="resume">
                    <!-- 个人信息 -->
                    <div class="section userinfo">
                        <div class="primary">
                            <div class="photo">
                                <el-avatar :size="80" :src="photo"></el-avatar>
                            </div>
                            <div class="text">
                                <div class="name">{{this.formUserInfo.name}} <span>Update time：{{this.formUserInfo.updateTime}}</span></div>
                                <div class="other">
                                    <span v-if="this.formUserInfo.sex==1">Male</span>
                                    <span v-else>Female</span>
                                    <span>{{this.formUserInfo.age}} years old</span>
                                    <span>{{this.formUserInfo.liveCity_dictText}}</span>
                                    <span v-if="!this.formUserInfo.jobTimeFlag">{{this.formUserInfo.workYear}} years of work experience</span>
                                        <span v-else>0 year of work experience</span>
                                </div>
                                <div class="contact">
                                    <span><i class="iconfont icon-phone"></i>{{this.formUserInfo.phone}}</span>
                                    <span><i class="iconfont icon-email"></i>{{this.formUserInfo.email}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 个人优势 -->
                    <div class="section advantage" v-if="resumeType == 1">
                        <div class="title">Personal advantage</div>
                        <div class="primary" v-if="!formAdvantageShow">
                            <pre class="txt">{{ formAdvantage.advantage |deft }}</pre>
                        </div>
                    </div>
                     <div class="section advantage" v-if="resumeType == 2">
                        <div class="title">Research direction and achievements</div>
                        <div class="primary" v-if="!majorResearchDirectionShow">
                            <pre class="txt">{{ formAdvantage.majorResearchDirection  |deft }}</pre>
                        </div>
                    </div>
                    <div class="section advantage" v-if="resumeType == 2">
                        <div class="title">Self-comprehensive evaluation</div>
                        <div class="primary" v-if="!selfEvaluationShow">
                            <pre class="txt">{{ formAdvantage.selfEvaluation  |deft }}</pre>
                        </div>
                    </div>
                    <div class="section advantage" v-if="resumeType == 2">
                        <div class="title">Other situations（Campus Employment）</div>
                        <div class="primary" v-if="!otherSituationsShow">
                            <pre class="txt">{{ formAdvantage.otherSituations |deft }}</pre>
                        </div>
                    </div>
                    <!-- 期望职位 -->
                    <div class="section wantJob" v-if="resumeType == 1">
                        <div class="title">Expected position</div>
                        <div class="primary" v-if="!formWantJobShow">
                            <ul>
                                <li v-if="!wantJobList || wantJobList.length == 0">
                                    <div class="txt">无</div>
                                </li>                                
                                <li v-for="(item,index) in wantJobList" :key="index">
                                    <div class="txt">
                                        <div class="t">{{item.workNature_dictText[1]}}</div>
                                        <dl>
                                            <dd>Expected industry: {{item.workIndustry_dictText[1]}} </dd>
                                            <dd>Expected city: {{item.cityId_dictText}} </dd>
                                            <dd>Expected salary: {{item.money1}}</dd>
                                            <dd>Expected type: {{item.workType_dictText}}</dd>
                                        </dl>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 工作/实习经历 -->
                    <div class="section work">
                        <div class="title">Work experience</div>
                        <div class="primary" v-if="!formWorkShow">
                            <ul>
                                 <li v-if="!workList || workList.length == 0">
                                    <div class="txt">无</div>
                                </li>                               
                                <li v-for="(item,index) in workList" :key="index">
                                    <div class="txt">
                                        <div class="t">{{item.companyName}} 
                                            <span>{{item.workStartTime_dictText}} - {{item.workEndTime_dictText}}</span></div>
                                        <div class="dsc"><span>{{item.positionName_dictText[1]}}</span></div>
                                        <dl style="margin: 0" v-if="resumeType == 1">
                                            <dd>Salary: {{item.salary}} Yuan / month</dd>
                                            <!-- <dd>Skills: <span v-for="(x,y) in item.workSignCode" :key="y">{{x}}</span></dd> -->
                                        </dl>
                                        <div class="dsc" style="margin-top: 5px">
                                            <p v-html="item.workContent"></p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- 主要工作业绩 -->
                    <div class="section advantage" v-if="resumeType == 1">
                        <div class="title">Main Achievements</div>
                        <div class="primary" v-if="!majorWorkPerformanceShow">
                            <pre class="txt">{{ (!formAdvantage.majorWorkPerformance || formAdvantage.majorWorkPerformance == "无") ? "/" : formAdvantage.majorWorkPerformance}}</pre>
                        </div>
                    </div>

                    <!-- 教育经历 -->
                    <div class="section education">
                        <div class="title">Educational experience</div>
                        <div class="primary" v-if="!formEducationShow">
                            <ul>
                                 <li v-if="!educationList || educationList.length == 0">
                                    <div class="txt">无</div>
                                </li>
                                <li v-if="!educationList && educationList.length == 0">无</li>                               
                                <li v-for="(item,index) in educationList" :key="index">
                                    <div class="txt">
                                        <div class="t">{{item.schoolName}} 
                                            <span>{{item.startEduTime_dictText}} - {{item.endEduTime_dictText}}</span>
                                        </div>
                                        <div class="dsc">
                                            <span>{{item.major}}</span>
                                            <span>{{item.eduLevel_dictText}}</span>
                                            <span v-if="item.r1 == 1">Scholar</span>
                                            <span v-if="item.r1 == 2">Master</span>
                                            <span v-if="item.r1 == 3">Doctor</span>
                                            <span v-if="item.recruitmentFlag=='0'">National Unified Entrance Examination</span>
                                            <span v-if="item.recruitmentFlag=='1'">Not National Unified Entrance Examination</span>
                                            <span v-if="item.recruitmentFlag=='2'">Education Abroad</span>
                                            <span v-if="item.r2 == 1">Full-time</span>
                                            <span v-if="item.r2 == 2">Part-time</span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 项目经历 -->
                    <div class="section project" v-if="resumeType == 1">
                        <div class="title">Project experience</div>
                        <div class="primary" v-if="!formProjectShow">
                            <ul>
                                <li v-if="!projectList || projectList.length == 0">
                                    <div class="txt">无</div>
                                </li>
                                <li v-if="!projectList && projectList.length == 0">无</li>                                
                                <li v-for="(item,index) in projectList" :key="index">
                                    <div class="txt">
                                        <div class="t">{{item.projectName}} 
                                            <span>{{item.startTime_dictText}} - {{item.endTime_dictText}}</span>
                                        </div>
                                        <div class="dsc">
                                            <div class="tt">Project description</div>
                                            <p v-html="item.projectDescribe"></p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 培训经历 -->
                    <div class="section train" v-if="resumeType == 1">
                        <div class="title">Training experience</div>
                        <div class="primary" v-if="!formTrainShow">
                            <ul>
                                <li v-if="!trainList || trainList.length == 0">
                                    <div class="txt">无</div>
                                </li>                                
                                <li v-for="(item,index) in trainList" :key="index">
                                    <div class="txt">
                                        <div class="t">{{item.mechanismName}}
                                        </div>
                                        <div class="dsc"><span>{{item.curriculum}}</span><span>{{item.startTime_dictText}} - {{item.endTime_dictText}}</span></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 语言能力 -->
                    <div class="section language" v-if="resumeType == 1">
                        <div class="title">Language ability</div>
                        <div class="primary" v-if="!formLanguageShow">
                            <ul>
                                <li v-if="!languageList || languageList.length == 0">
                                    <div class="txt">无</div>
                                </li>                                
                                <li v-for="(item,index) in languageList" :key="index">
                                    <div class="txt">
                                        <div class="t">{{item.type}}
                                        </div>
                                        <div class="dsc"><span>Listening and speaking ability：{{item.oralLanguageLevel}}</span><span>Reading and writing ability：{{item.readingLevel}}</span></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 职业特长与技能 -->
                    <div class="section skill" v-if="resumeType == 1">
                        <div class="title">professional title</div>
                        <div class="primary" v-if="!formSkillShow">
                            <ul>
                                <li v-if="!skillList || skillList.length == 0">
                                    <div class="txt">无</div>
                                </li>                                
                                <li v-for="(item,index) in skillList" :key="index">
                                    <div class="txt">
                                        <div class="t">{{item.name}}
                                        </div>
                                        <!-- <div class="dsc"><span>Degree of mastery：{{item.level}}</span><span>Duration of use：{{item.time}} mouths</span></div> -->
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 证书 -->
                    <div class="section certificate">
                        <div class="title">Certificate</div>
                        <div class="primary" v-if="!formCertificateShow">
                            <ul>
                                <li v-if="!certificateList || certificateList.length == 0">
                                    <div class="txt">无</div>
                                </li>  
                                <li v-if="!certificateList && certificateList.length == 0">无</li>
                                <li v-for="(item,index) in certificateList" :key="index">
                                    <div class="txt">
                                        <div class="t">{{item.name}} 
                                            <span>{{item.time_dictText}}</span>
                                            <span >{{item.licenseIssuingUnit}}</span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 家庭成员 -->
                        <div class="section family">
                            <div class="title">Family members and important social relations</div>
                            <div class="primary">
                                <ul>
                                <li v-if="!familyList || familyList.length == 0">
                                    <div class="txt">无</div>
                                </li>                                    
                                    <li v-for="(item,index) in familyList" :key="index">
                                        <div class="txt">
                                            <div class="t">{{item.name}} 
                                                <span>({{item.appellation}})</span>
                                                <!-- <div class="btnEdit" @click="edit('formFamily','edit',item.id)"><i class="el-icon-edit-outline"></i>Edit</div>
                                                <div class="btnEdit" @click="delect('formFamily',item.id)"><i class="el-icon-delete"></i>Delete</div> -->
                                            </div>

                                            <div class="dsc">
                                                <span v-if="item.age && resumeType == 1">{{item.age}} Year</span>
                                                <span v-if="item.politics">{{item.politics}}</span>
                                                <span v-if="item.company">{{item.company}}</span>
                                                <span v-if="item.position">{{item.position}}</span>
                                                <span v-if="item.remark">{{item.remark}}</span>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    <!-- 附件 -->
                    <div class="section enclosure">
                        <div class="title">Enclosure</div>
                        <div class="primary" v-if="!formEnclosureShow">
                            <ul>
                                <li v-if="!fileList || fileList.length == 0">
                                    <div class="txt">无</div>
                                </li>                                
                                <li v-for="(item,index) in fileList" :key="index">
                                    <div class="txt">
                                        <div class="t">{{item.fileRealName}}
                                            <div class="btnEdit" @click="openFile(item.url,item.id,item.fileLastName)"><i class="el-icon-link"></i>Preview</div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 查看附件图片 -->
        <el-dialog width='900px' :visible.sync="dialogVisible" class="lookFile" :before-close="dialogClose">
            <div class="box">
                <img :src="dialogImageUrl" alt="" v-if="dialogImageUrl">
                <pdf :src="dialogPdfUrl" v-if="dialogPdfUrl" v-for="i in numPages" :key="i" :page="i"></pdf>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import pdf from 'vue-pdf'
import {getResume, getSign} from '@/api/api'

export default {
    //组件注入
    components: {pdf},
    //存放数据
    data() {
        return {
            resumeType: 1,
            editType: '',//add 添加
            editId: '',//编辑id
            resumeId: '',//简历id
            majorWorkPerformanceShow: false, //主要工作业绩
                majorResearchDirectionShow: false,
                selfEvaluationShow: false,
                otherSituationsShow: false,            
                formUserInfoShow: false,//个人信息编辑
                formAdvantageShow: false,//个人优势编辑
                formWantJobShow: false,//期望职位编辑
                formWorkShow: false,//工作经历编辑
                formEducationShow: false,//教育经历编辑
                formProjectShow: false,//项目经历编辑
                formTrainShow: false,//培训经历编辑
                formLanguageShow: false,//语言能力编辑
                formSkillShow: false,//技能编辑
                formCertificateShow: false,//证书编辑
                formEnclosureShow: false,//附件上传
                UploadPhotoFlag:false,//上传头像
                fileName:'',
                photo:'',//头像
                familyList: [],
                formUserInfo:{
                    name:'游客',//姓名
                    sex:'',//性别
                    birthday:'',//出生年月
                    identity:'',//求职身份
                    workState:'',//求职状态
                    maritalStatus:'',//婚姻状况
                    jobTime:'',//参加工作时间
                    worked:false,
                    homeTownCode:'',//户口所在地
                    liveCityCode:'',//现居住城市
                    political:'',//政治面貌
                    phone:'',//联系方式
                    email:'',//电子邮箱
                    age:'0',//年龄
                    workYear:'0',//工作时间
                    jobTimeFlag:false,//暂无工作经验
                    photoId: '',//头像文件id
                },
                formAdvantage:{
                    advantage:'',//个人优势
                    majorResearchDirection: '',
                    selfEvaluation: '',
                    majorWorkPerformance: '',//主要工作业(社招)                
                    otherSituations: '',                    
                },
                formWantJob:{
                    workNatureCode:[],//期望职位
                    cityStringCode:[],//期望地点
                    workType:'',//求职类型
                    workIndustryCode:[],//期望行业
                    money:'',//薪资要求范围
                },
                wantJobList:[],//期望职位列表
                formWork:{
                    companyName:'',//公司名称
                    positionNameCode:[],//所任职位
                    workSignCode:[],//该份工作需要的技能
                    workTime:'',//在职时间
                    salary:'',//税前月薪
                    workContent:'',//工作内容
                },
                workList:[],//工作经历列表
                formEducation:{
                    schoolName:'',//学校名称
                    major:'',//所学专业
                    overseasFlag:'',//海外学习经历
                    studyTime:'',//就读时间
                    recruitmentFlag:'',//是否统招
                    eduLevel:'',//学历
                },
                educationList:[],//教育经历列表
                formProject:{
                    projectName:'',//项目名称
                    time:'',//项目时间
                    projectDescribe:'',//项目描述
                },
                projectList:[],//项目经历列表
                formTrain:{
                    time:'',//培训时间
                    mechanismName:'',//培训机构
                    curriculum:'',//培训课程
                },
                trainList:[],//培训经历列表
                formLanguage:{
                    type:'',//语种
                    oralLanguageLevel:'',//听说能力
                    readingLevel:'',//读写能力
                },
                languageList:[],//语言能力列表
                formSkill:{
                    name:'',//技能名称
                    time:'',//使用时长
                    level:'',//掌握程度
                },
                skillList:[],//特长技能
                formCertificate:{
                    name:'',//证书名称
                    time:'',//获得时间
                },
                certificateList:[],//证书列表
                formEnclosure:{//附件
                    name:'',//证书名称
                    file:{},//文件
                    fileList:[]
                },
                uploadFlag:true,
                fileList:[],//附件列表
                dialogVisible:false,//附件图片弹出
                dialogImageUrl:'',//附件图片
                dialogPdfUrl: '',//pdf
                numPages: undefined,//pdf
            }
        },
        //接受父组件传递的值
        props:[],
        //监控data中的数据变化
        watch: {
            
        },
        //方法集合
        methods: {
            //调简历信息
            getResume(){
                getResume({
                    'resumeId': this.resumeId,
                }).then(res =>{
                    if(res.code==200){
                         // 家庭成员
                        if(res.result.familyMembers){
                            this.familyList = res.result.familyMembers;
                        }
                        //个人信息
                        if(res.result.userInfo.name){
                            this.formUserInfo.name = res.result.userInfo.name
                            this.formUserInfo.email = res.result.userInfo.email
                            this.formUserInfo.sex = res.result.userInfo.sex.toString()
                            this.formUserInfo.birthday = res.result.userInfo.birthday
                            this.formUserInfo.homeTownCode = res.result.userInfo.homeTownCode
                            this.formUserInfo.liveCityCode = res.result.userInfo.liveCityCode
                            this.formUserInfo.workState = res.result.userInfo.workState.toString()
                            this.formUserInfo.jobTime = res.result.userInfo.jobTime
                            this.formUserInfo.identity = res.result.userInfo.idEntity.toString()
                            this.formUserInfo.maritalStatus = res.result.userInfo.maritalStatus.toString()
                            this.formUserInfo.updateTime = this.$formatDate(res.result.userInfo.updateTime)
                            this.formUserInfo.liveCity_dictText = res.result.userInfo.liveCity_dictText.split(',')[1]
                            if(res.result.userInfo.phone){
                                this.formUserInfo.phone = res.result.userInfo.phone
                            }else{
                                this.formUserInfo.phone = this.userName
                            }
                            if(res.result.userInfo.political){
                                this.formUserInfo.political = res.result.userInfo.political.toString()
                            }
                            this.photo = res.result.userInfo.photoId_dictText
                            let date = this.$formatDate(res.result.userInfo.birthday)
                            this.formUserInfo.age = this.$getDateDifference(date) 
                            if(res.result.userInfo.jobTime){
                                let date1 = this.$formatDate(res.result.userInfo.jobTime)
                                this.formUserInfo.workYear = this.$getDateDifference(date1)
                            }
                            if(res.result.userInfo.jobFlag==1){
                                this.formUserInfo.jobTimeFlag = false
                            }else{
                                this.formUserInfo.jobTimeFlag = true
                            }
                        }
                        this.resumeType = res.result.resumes.resumeType
                        //个人优势
                        if(res.result.resumes.advantage){
                            this.formAdvantage.advantage = res.result.resumes.advantage
                        }
                    if (res.result.resumes.majorResearchDirection) {
                        this.formAdvantage.majorResearchDirection = res.result.resumes.majorResearchDirection
                    }
                    if (res.result.resumes.otherSituations) {
                        this.formAdvantage.otherSituations = res.result.resumes.otherSituations
                    }
                    if (res.result.resumes.selfEvaluation) {
                        this.formAdvantage.selfEvaluation = res.result.resumes.selfEvaluation
                    }
                    if (res.result.resumes.majorWorkPerformance) {
                        this.formAdvantage.majorWorkPerformance = res.result.resumes.majorWorkPerformance
                    }                      
                        //期望职位
                        if(res.result.workIntentions){
                            let list = res.result.workIntentions
                            for(let i in list){
                                list[i].cityId_dictText = list[i].cityId_dictText.replace(/\,/g,"/")
                                list[i].workIndustry_dictText = list[i].workIndustry_dictText.split(',')
                                list[i].workNature_dictText = list[i].workNature_dictText.split(',')
                                list[i].money = list[i].minMoney + '-' + list[i].maxMoney
                                if(list[i].money=='0-1000'){
                                    list[i].money1 = 'Less than 1000 Yuan / month'
                                }else if(list[i].money=='1000-2000'){
                                    list[i].money1 = '1000-2000 Yuan / month'
                                }else if(list[i].money=='2000-4000'){
                                    list[i].money1 = '2000-4000 Yuan / month'
                                }else if(list[i].money=='4000-6000'){
                                    list[i].money1 = '4000-6000 Yuan / month'
                                }else if(list[i].money=='6000-8000'){
                                    list[i].money1 = '6000-8000 Yuan / month'
                                }else if(list[i].money=='8000-10000'){
                                    list[i].money1 = '8000-10000 Yuan / month'
                                }else if(list[i].money=='10000-15000'){
                                    list[i].money1 = '10000-15000 Yuan / month'
                                }else if(list[i].money=='15000-25000'){
                                    list[i].money1 = '15000-25000 Yuan / month'
                                }else if(list[i].money=='25000-35000'){
                                    list[i].money1 = '25000-35000 Yuan / month'
                                }else if(list[i].money=='35000-50000'){
                                    list[i].money1 = '35000-50000 Yuan / month'
                                }else if(list[i].money=='50000-70000'){
                                    list[i].money1 = '50000-70000 Yuan / month'
                                }else if(list[i].money=='70000-100000'){
                                    list[i].money1 = '70000-100000 Yuan / month'
                                }else if(list[i].money=='100000-999999'){
                                    list[i].money1 = 'Over 100000 Yuan / month'
                                }
                                if(list[i].workType=='0'){
                                    list[i].workType_dictText = 'Full-time'
                                }else if(list[i].workType=='1'){
                                    list[i].workType_dictText = 'Oart-time job'
                                }else if(list[i].workType=='2'){
                                    list[i].workType_dictText = 'Internship'
                                }
                            }
                            this.wantJobList = list
                        }
                        //工作经历
                        if(res.result.userWorkInfos){
                            let list = res.result.userWorkInfos
                            for(let i in list){
                                list[i].positionName_dictText = list[i].positionName_dictText.split(',')
                                list[i].workStartTime_dictText = this.$formatDateMonth(list[i].workStartTime)
                                list[i].workEndTime_dictText = this.$formatDateMonth(list[i].workEndTime)
                                list[i].workTime = [list[i].workStartTime,list[i].workEndTime]
                            }
                            this.workList = list
                        }
                        //教育经历
                        if(res.result.userEduInfos){
                            let list = res.result.userEduInfos
                            for(let i in list){
                                list[i].startEduTime_dictText = this.$formatDateMonth(list[i].startEduTime)
                                list[i].endEduTime_dictText = this.$formatDateMonth(list[i].endEduTime)
                                list[i].studyTime = [list[i].startEduTime,list[i].endEduTime]
                                // list[i].recruitmentFlag = list[i].recruitmentFlag.toString()
                                list[i].eduLevel = list[i].eduLevel.toString()
                            }
                            this.educationList = list
                        }
                        //项目经历
                        if(res.result.projectInfos){
                            let list = res.result.projectInfos
                            for(let i in list){
                                list[i].startTime_dictText = this.$formatDateMonth(list[i].startTime)
                                list[i].endTime_dictText = this.$formatDateMonth(list[i].endTime)
                                list[i].time = [list[i].startTime,list[i].endTime]
                            }
                            this.projectList = list
                        }
                        //培训经历
                        if(res.result.trainInfos){
                            let list = res.result.trainInfos
                            for(let i in list){
                                list[i].startTime_dictText = this.$formatDateMonth(list[i].startTime)
                                list[i].endTime_dictText = this.$formatDateMonth(list[i].endTime)
                                list[i].time = [list[i].startTime,list[i].endTime]
                            }
                            this.trainList = list
                        }
                        //语言能力
                        if(res.result.languageLevelInfos){
                            let list = res.result.languageLevelInfos
                            this.languageList = list
                        }
                        //特长技能
                        if(res.result.skillsInfos){
                            let list = res.result.skillsInfos
                            this.skillList = list
                        }
                        //资质证书
                        if(res.result.certificateInfos){
                            let list = res.result.certificateInfos
                            for(let i in list){
                                list[i].time_dictText = this.$formatDateMonth(list[i].time)
                            }
                            this.certificateList = list
                        }
                        //附件
                        if(res.result.files){
                            let list = res.result.files
                            this.fileList = list
                        }
                    }
                });
            },
            //查看附件
            openFile(file,fileId,fileLastName){
                let sign = ''
                //获取签名
                getSign({
                    'fileId':fileId,
                }).then(res =>{
                    if(res.code==200){
                        sign = res.result
                        if(fileLastName=='png'||fileLastName=='jpg'){
                            this.handlePictureCardPreview(file+'?sign='+sign)
                        }
                        if(fileLastName=='pdf'){
                            this.handlePictureCardPreview()
                            this.dialogPdfUrl = pdf.createLoadingTask(file+'?sign='+sign)
                            this.dialogPdfUrl.promise.then(pdf => {
                                this.numPages = pdf.numPages
                            }).catch(err => {
                                this.$message.error('简历预览失败')
                                console.log(err)
                            })
                        }
                    }
                });
            },
            //查看附件图片
            handlePictureCardPreview(url) {
                this.dialogImageUrl = url
                this.dialogVisible = true;
            },
            //清空弹出内容
            dialogClose(){
                this.dialogVisible = false;
                setTimeout(()=>{
                    this.dialogImageUrl = ''
                    this.dialogPdfUrl = ''
                },500)
            }
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {},
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            this.resumeId = this.$route.query.id
            //调简历信息
            this.getResume()
        }
    };
</script>
<style lang="scss">
    @mixin text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    @mixin text-ellipsisclamp($clamp){display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $clamp;overflow: hidden;}
    @mixin transition{transition: all .3s;}
    .PersonResumeLook{background: #f6f6f6;
        .main{min-height: 500px;
            .banner{width: 900px;height: 120px;background: url('../../assets/person-bg.jpg') center no-repeat;background-size: cover;margin: 0 auto;}
            .block{height: auto;overflow: hidden;padding-bottom: 50px;
                .resume{width: 900px;height: auto;overflow: hidden;padding: 30px;background: #fff;margin: 0 auto;
                    .section{height: auto;overflow: hidden;margin-bottom: 20px;padding-bottom: 20px;border-bottom: 1px solid #f2f2f2;
                        .title{font-size: 16px;color: #333;font-weight: bold;position: relative;padding-left: 15px;margin-bottom: 10px;
                            &:after{content: "";width: 3px;height: 15px;background: #E54437;position: absolute;left: 0;top: 0;}
                            .btnEdit{opacity: 1;}
                        }
                        .btnEdit{opacity: 0;float: right;font-size: 14px;color: #999;@include transition();cursor: pointer;font-weight: normal;margin: 0 10px 0 20px;
                            i{margin-right: 4px}
                            &:hover{color: #E54437;}
                        }
                        .form{height: auto;padding: 30px;
                            .el-radio{min-width: 100px;text-align: center;margin: 0 15px 0 0;border-radius: 0;background: #fff;
                                &:last-child{margin: 0;}
                            }
                            .el-input{width: 300px;}
                            .el-input__inner{border-radius: 0;}
                            .el-icon-date,.el-input__icon{vertical-align: -2px;}
                            .el-textarea__inner{height: 100px;border-radius: 0;padding: 10px 15px}
                            .el-textarea .el-input__count{line-height: normal;}
                            .el-form-item:last-child{margin: 0;}
                            .left,.right{width: 48%;height: auto;overflow: visible;}
                            .el-upload{width: 140px;height: 140px;line-height: 140px;border: 1px dashed #DCDFE6;border-radius: 5px;cursor: pointer;
                                i{font-size: 22px;color: #999;}
                            }
                            .hide{
                                .el-upload,.el-upload__tip{display: none;}
                            }
                        }
                        .primary{height: auto;overflow: hidden;position: relative;
                            ul{height: auto;overflow: hidden;
                                li{height: auto;overflow: hidden;margin-bottom: 10px;
                                    .t{font-size: 16px;color: #333;
                                        span{font-size: 14px;color: #999;margin-left: 10px;}
                                        .btnEdit{margin-right: 0;}
                                    }
                                    .dsc{font-size: 14px;color: #999;line-height: 30px;margin-top: 8px;
                                        span{margin-right: 15px;position: relative;padding-right: 15px;
                                            &:after{content: "";width: 1px;height: 12px;background: #eee;position: absolute;right: 0;top: 2px;}
                                            &:last-child{margin: 0;padding:0;
                                                &:after{display: none;}
                                            }
                                        }
                                        .tt{color: #666;}

                                        p {
                                            line-height: 22px;
                                            white-space: pre-wrap;
                                        }
                                    }

                                    dl {
                                        height: auto;
                                        overflow: hidden;
                                        margin-top: 8px;

                                        dd {
                                            width: 50%;
                                            font-size: 14px;
                                            color: #666;
                                            float: left;
                                            line-height: 30px;

                                            span {
                                                line-height: 24px;
                                                padding: 0 10px;
                                                background: #eee;
                                                display: inline-block;
                                                margin-right: 10px;
                                            }
                                        }
                                    }

                                    &:last-child {
                                        margin: 0;
                                    }
                                }
                            }

                            .txt {
                                white-space: pre-wrap;
                                word-wrap: break-word;
                                font-size: 14px;
                                color: #666;
                                cursor: pointer;
                                padding: 10px;
                                @include transition();

                                &:hover {
                                    background: #f9f9f9;

                                    .btnEdit {
                                        opacity: 1;
                                    }
                                }
                            }
                        }
                        .edit{height: auto;overflow: hidden;position: relative;background: #f6f6f6;margin-top: 20px;}
                        &:last-child{margin: 0;padding:0;border: 0;}
                    }
                    .userinfo{
                        .photo{width: 80px;height: 80px;border-radius: 50%;overflow: hidden;float: left;margin-right: 20px;cursor: pointer;position: relative;
                            img{width: 100%;height: 100%;}
                            .avatar-uploader{width: 100%;height: 100%;background: rgba($color: #000000, $alpha: .5);position: absolute;left: 0;top: 0;opacity: 0;@include transition();
                                i{font-size: 18px;color: #fff}
                                p{font-size: 12px;color: #fff}
                                &:focus{color: #fff;}
                                .el-upload{width: 100%;height: 100%;display: flex;flex-flow: column;align-items: center;justify-content: center;}
                            }
                            &:hover .avatar-uploader{opacity: 1;}
                        }
                        .btnEdit{opacity: 1;}
                        .text{height: auto;overflow: hidden;
                            .name{font-size: 24px;color: #333;font-weight: bold;
                                span{font-size: 14px;color: #999;font-weight: normal;margin-left: 10px}
                            }
                            .other{height: auto;overflow: hidden;margin-top: 10px;
                                span{font-size: 14px;color: #666666;position: relative;padding-right: 15px;margin-left: 15px;
                                    &:after{content: "";width: 1px;height: 12px;background: #e8e8e8;position: absolute;right: 0;top: 3px;}
                                    &:first-child{margin: 0;}
                                    &:last-child:after{display: none;}
                                }
                            }
                            .contact{height: auto;overflow: hidden;margin-top: 10px;
                                span{font-size: 14px;color: #333;margin-right: 30px;
                                    i{font-size: 16px;vertical-align: -1px;color: #999;
                                        &.icon-email{font-size: 17px;margin-right: 3px;}
                                    }
                                }
                            }
                        }
                        .btnEdit{position: absolute;right: 0;top: 0;}
                        .look{font-size: 14px;color: #999;cursor: pointer;position: absolute;right: 0;top: 50px;margin: 0 10px 0 20px;@include transition();
                            i{margin-right: 4px;}
                            &:hover{color: #E54437;}
                        }
                    }
                }
            }
        }
        .lookFile{
            .box{height: auto;max-height: 500px;overflow-y: auto;
                img{display: block;margin: 0 auto;}
            }
        }
    }
</style>